<template>
  <layout-body>
    <!-- 列表 -->
    <el-table
      class="mt20"
      v-loading="initLoading"
      :data="commentList"
      row-key="id"
    >
      <el-table-column label="商品信息" prop="label_name">
        <template #default="scope">
          <div class="flex">
            <el-avatar
              shape="square"
              :size="60"
              :src="scope.row.order_goods.goods_image"
            ></el-avatar>
            <div class="ml10">
              <div class="te2">
                {{ scope.row.order_goods.goods_name }}
              </div>
              <div class="mt5">
                <span class="text-grey">规格:</span>
                <span>{{ scope.row.order_goods.sku_attr_text }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价/数量" prop="price">
        <template #default="scope">
          <money :value="scope.row.order_goods.price"></money>
          <span class="text-grey">x{{ scope.row.order_goods.total_num }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实付款" prop="total_pay_price">
        <template #default="scope">
          <money :value="scope.row.order_goods.total_pay_price"></money>
        </template>
      </el-table-column>
      <el-table-column label="用户" prop="label_name">
        <template #default="scope">
          <userBox
            :avatar="scope.row.user_avatar"
            :nickName="scope.row.user_nickName"
            :id="scope.row.user_id"
          ></userBox>
        </template>
      </el-table-column>
      <el-table-column align="left" label="申请原因" prop="type_desc">
        <template #default="scope">
          <span>{{ scope.row.type_desc }}</span>
        </template></el-table-column
      >
      <el-table-column align="center" label="售后类型" prop="type">
        <template #default="scope">
          <el-tag type="" disable-transitions size="small">{{
            scope.row.type.name
          }}</el-tag>
        </template></el-table-column
      >
      <el-table-column align="center" label="申请时间" prop="create_time">
        <template #default="scope">
          <span class="text-grey">{{ scope.row.create_time }}</span>
        </template></el-table-column
      >
      <el-table-column align="left" label="处理状态" prop="status" width="200">
        <template #default="scope">
          <span :class="`text-${scope.row.status.color}`">{{
            scope.row.status.name
          }}</span>
        </template></el-table-column
      >
      <el-table-column align="right" label="操作" width="200">
        <template #default="scope">
          <el-button
            v-if="
              scope.row.status.value == 3 &&
              scope.row.type.value == 1 &&
              scope.row.delivery_type.value == 'express' &&
              scope.row.user_send_status
            "
            link
            type="primary"
            @click="_onReceiptAndReFund(scope.row.id,scope.row)"
            v-permission="'store-order_refund-receipt'"
            >确定已收货</el-button
          >
          <el-button
            v-if="
              scope.row.status.value == 3 &&
              scope.row.type.value == 2 &&
              scope.row.delivery_type.value == 'express' &&
              scope.row.user_send_status &&
              !scope.row.receipt_status
            "
            link
            type="primary"
            @click="_onReceipt(scope.row.id)"
            v-permission="'store-order_refund-receipt'"
            >确定已收货</el-button
          >
          
          <el-button
            v-if="
              scope.row.status.value == 3 &&
              scope.row.type.value == 1 &&
              scope.row.delivery_type.value == 'slef_mention' &&
              !scope.row.user_send_status
            "
            link
            type="primary"
            @click="_onArrival(scope.row.id,scope.row)"
            v-permission="'store-order_refund-receipt'"
            >用户已到店并退货</el-button
          >
          <el-button
            v-if="
              scope.row.status.value == 3 &&
              scope.row.type.value == 2 &&
              scope.row.delivery_type.value == 'express' &&
              scope.row.user_send_status &&
              scope.row.receipt_status &&
              !scope.row.delivery_status
            "
            link
            type="primary"
            @click="_onDelivery(scope.row.id)"
            v-permission="'store-order_refund-delivery'"
            >发货</el-button
          >
          <el-button
            v-if="scope.row.status.value == 1"
            link
            type="primary"
            @click="_onAudit(scope.row.id)"
            v-permission="'store-order_refund-audit'"
            >审核</el-button
          >
          <el-button
            link
            type="primary"
            @click="toDetail(scope.row.id)"
            v-permission="'store-order_refund-detail'"
            >查看详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
    <orderRefundDetail ref="orderRefundDetailRef"></orderRefundDetail>
    <audit ref="auditRef" @success="toInit()"></audit>
    <delivery ref="deliveryRef" @success="toInit()"></delivery>
    
  </layout-body>
</template>
  <script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { getOrderRefundList } from "@/api/store/order_refund";
import { listPageType, Result, ResultError } from "@/types";
import userBox from "@/components/user/box.vue";
import orderRefundDetail from "@/views/store/order_refund/detail.vue";
import audit from "@/views/store/order_refund/audit.vue";
import delivery from "@/views/store/order_refund/delivery.vue";
import { useConfig } from "@/store";
import refundCommon from "./common";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const commentList = ref<any>([]);

const toInit = () => {
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getOrderRefundList(obj)
    .then((res: Result) => {
      commentList.value = res.data.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

onMounted(() => {
  toInit();
});

const orderRefundDetailRef = ref<HTMLElement>();

const  deliveryRef = ref<HTMLElement>();

const toDetail = (id: number) => {
  proxy?.$refs["orderRefundDetailRef"].open(id);
};

const { _onAudit,_onReceipt,_onDelivery,_onReceiptAndReFund,_onArrival } = refundCommon(toInit);
</script>